<template>
    <div class="ad">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
        <van-card v-for="item in list" :key="item.filmId" @click="tail(item.filmId)">
            <template #tags>
                <div class="btn">
                    <van-tag plain size="large" text-color="orange" type="danger">购票</van-tag>
                </div>
            </template>
            <template #desc>
                <div class="desc">
                    <div>观众评分： <span class="grade">{{item.grade ? item.grade : 10}}</span></div>
                    <div class="actors">主演：{{item.actors | handlerActor}}</div>
                    <div>
                        <span>{{item.nation}}</span>
                        |
                        <span>{{item.runtime}}分钟</span>
                    </div>
                </div>
            </template>
            <template #title>
                <span class="title">{{item.name}}</span>
                <span class="title111">{{item.item.name}}</span>
            </template>
            <template #thumb>
                <div class="thumb">
                    <img :src="item.poster" width="66" />
                </div>
            </template>
        </van-card>
    </van-list>
    </div>
</template>

<script>
import Vue from 'vue';
import { Card } from 'vant';
import { Tag } from 'vant';
import { NowPlaying } from '@/request/request'
import { List } from 'vant';

Vue.use(List);
Vue.use(Tag);
Vue.use(Card);
export default {
    created() {
        this.$store.commit('changeActivet', 0)
    },
    data () {
        return {
            list: [],
            loading: false,
            finished: false,
            pageNum: 1
        }
    },
    methods: {
        onLoad() {
        // 异步更新数据
        NowPlaying('?pageNum=' + this.pageNum).then(res =>{
            // console.log(res);
            if(res.status === 0 && res.msg === 'ok'){
                if(this.list.length >= res.data.total){
                    this.finished = true
                }else{
                    this.list.push(...res.data.films)
                    this.pageNum++
                }
            }
            this.loading = false
        }) 
    },
    tail(id){
        this.$router.push({path:'/detail',query:{id:id,url: this.$route.path}})
    }
    },
    filters: {
        handlerActor(actorsArr) {
            if(!actorsArr){
                return '暂无主演'
            }
            let actors = actorsArr.map(item => item.name)
            return actors.join(' ')
        }
        
    }
}
</script>

<style lang="scss" scoped>
.ad{
    padding-bottom: 50px;
}
    .van-card__header{
        position: relative;
    }
    .grade{ 
        color: orange;
    }
    .title{
        font-size: 16px;
        color: #191a1b;
    }
    .title111{
        width: 25px;
        padding: 1px 3px;
        height: 10px;
        margin-left: 5px;
        text-align: center;
        line-height: 10px;
        color: white;
        background-color: rgb(222, 222, 222);
    }
    .desc{
        margin-top: 4px;
        font-size: 13px;
        color: #797d82;
    }
    .btn{
        position:absolute;
        right: 0;
        bottom: 10px;
    }
    .actors{
        width: 190px;
        overflow: hidden;
        /*文字超出用省略号*/
        text-overflow:ellipsis;
        /*盒子模型*/
        display:-webkit-box;
        /*显示的文本行数*/
        -webkit-line-clamp:1;
        /*子元素的垂直排列方式*/
        -webkit-box-orient:vertical;
    }
    .van-tag{
        position: absolute;
        top: -50px;
        right: 5px;
        width: 30px;
    }
</style>
